<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        + 脚本语言
            + JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行,	JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

        + 基于对象
            + JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
        + 弱类型
            + JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
        + 事件驱动
            + JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
        + 跨平台性
            + JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。
        
        1、内部脚本方式引入
            + 说明
                + 在页面中,通过一对script标签引入JS代码
                + script代码放置位置具备一定的随意性,一般放在head标签中居多
        2、外部脚本方式引入
            + 说明
                + 内部脚本仅能在当前页面上使用,代码复用度不高
                + 可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件
                + 一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用
                + 一个html文档中,可以有多个script标签 
                + 抽取脚本代码到独立的js文件中
    -->
    <script src="js/button.js" type="text/javaScript"></script>
    <script>
        function btnFunction(){
            alert("Hello,我是惊喜!")
        }
    </Script>
    <style>
        .btn1 {
            height: 60px;
            width: 100px;
            font-size: 10px;
            font-family: "隶书";
            background-color: aqua;
            color: rgb(226, 45, 13);
        }
    </style>
</head>
<body>
    <button class="btn1" onclick="btnFunction()">点我有惊喜</button>
    <button class="btn1" onclick="suprise()">另外惊喜</button>
</body>
</html>